<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<body>
		<svg width="200" height="200" viewBox="0 0 200 200">
			<!--参考线-->
			<g style="stroke: gray; stroke-dasharray: 4 4;">
				<line x1="0" y1="0" x2="200" y2="0" />
				<line x1="20" y1="0" x2="20" y2="90" />
				<line x1="120" y1="0" x2="120" y2="90" />
			</g>
			
			<g transform="translate(20,0)">
				<g transform="skewX(30)">   <!--X轴倾斜30度-->
					<polyline points="50 0,0 0,0 50" style="fill: none;stroke: black;stroke-width: 2;" />
					<text x="0" y="60">skewX</text>
				</g>
			</g>
			
			<g transform="translate(120,0)">
				<g transform="skewY(30)">
					<polyline points="50 0,0 0,0 50" style="fill: none;stroke: black;stroke-width: 2;"/>
					<text x="0" y="60">skewY</text>
				</g>
			</g>
			
		</svg>
		
		skew保持水平线不变，skewY则保持垂直线不动
	</body>

</html>